<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/css/style/styles.css" />
    <script src="/js/jquery-3.6.1.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
</head>
<style>
    body {
        background: url('https://img0.baidu.com/it/u=2998114597,4152186187&fm=253&fmt=auto&app=120&f=JPEG?w=1067&h=800') no-repeat;
        background-size: 100% 130%;
    }

    #login_box {
        width: 30%;
        height: 400px;
        background-color: #00000060;
        margin: auto;
        margin-top: 10%;
        text-align: center;
        border-radius: 10px;
        padding: 50px 50px;
    }

    h2 {
        color: #ffffff90;
        margin-top: 5%;
    }

    #input-box {
        margin-top: 5%;
    }

    span {
        color: #fff;
    }

    input {
        border: 0;
        width: 80%;
        font-size: 15px;
        color: #fff;
        background: transparent;
        border-bottom: 2px solid #fff;
        padding: 5px 10px;
        outline: none;
        margin-top: 10px;
    }

    button {
        margin-top: 10px;
        width: 80%;
        height: 30px;
        border-radius: 10px;
        border: 0;
        color: #fff;
        text-align: center;
        line-height: 30px;
        font-size: 15px;
        background-image: linear-gradient(to right, #30cfd0, #330867);
    }

    #sign_up {
        margin-top: 45%;
        margin-left: 60%;
    }

    a {
        color: #b94648;
    }
</style>
<body>


<div id="login_box">
    <h2>学生成绩管理系统</h2>
    <div id="input_box">
        <input type="text" id="username" placeholder="请输入账号">
    </div>
    <div class="input_box">
        <input type="password"  id="password" placeholder="请输入密码">
    </div>
    <p>请选择你的登录身份</p>
    <button type="button" class="btn btn-default1"   onclick="slogin()">学生</button>

    <button type="button" class="btn btn-default2"   onclick="tlogin()" >教师</button>

    <button type="button" class="btn btn-default3"   onclick="alogin()" >管理员</button>
</div>
<script type="text/javascript">

    function slogin() {
        var name = $("#username").val();
        var password = $("#password").val();
        var len1 = document.getElementById("username").value.length;
        var len2 = document.getElementById("password").value.length;
        if (len1 == 0 && len2 == 0) {
            alert("请输入账号及密码！");
            return;
        }
        if (len1 == 0) {
            alert("请填写账号！");
            return;
        }
        if (len2 == 0) {
            alert("请填写密码！");
            return;
        }
        $.ajax({
            url: "/webapi/login/user",
            data: {
                username: name,
                password: password,
            }
        }).done(function (rs) {
            if (rs == 1 ) {
                window.location.href = "http://localhost:8080/student/list";
            } else {
                alert("账号或密码错误！！！请重试");
                document.getElementById("password").value = '';   //清空密码
            }
        });
    }
    function tlogin() {
        var name = $("#username").val();
        var password = $("#password").val();

        var usertype = $("[name='role']:checked").val();

        var len1 = document.getElementById("username").value.length;

        var len2 = document.getElementById("password").value.length;

        if (len1 == 0 && len2 == 0) {
            alert("请输入账号及密码！");
            return;
        }
        if (len1 == 0) {

            alert("请填写账号!");
            return;
        }

        if (len2 == 0) {

            alert("请填写密码!");
            return;
        }

        $.ajax({

            url: "/webapi/login/user",
            data: {

                username: name,
                password: password,

            }
        }).done(function (rs) {

            if (rs == 2) {
                window.location.href="http://localhost:8080/teacher/LIST";
            } else {

                alert("账号或密码错误!!!请重试");
                document.getElementById("password").value = '';   //清空密码
            }
        });
    }
    function alogin() {

        var name = $("#username").val();

        var password = $("#password").val();

        var usertype = $("[name='role']:checked").val();

        var len1 = document.getElementById("username").value.length;

        var len2 = document.getElementById("password").value.length;

        if (len1 == 0 && len2 == 0) {
            alert("请输入账号及密码！");
            return;
        }
        if (len1 == 0) {

            alert("请填写账号!");
            return;
        }

        if (len2 == 0) {

            alert("请填写密码!");
            return;
        }

        $.ajax({

            url: "/webapi/login/user",
            data: {

                username: name,
                password: password,

            }
        }).done(function (rs) {

            if (rs == 3 ) {
                window.location.href="http://localhost:8080/admin/List";
            }else {
                alert("账号或密码错误!!!请重试");
                document.getElementById("password").value = '';   //清空密码
            }
        });
    }
</script>
</body>
</html>